<template>
  <div>
    <div class="header">
      <p>操作日志</p>
      <span class="line"></span>
    </div>
    <div class="select">
      <el-input placeholder="对姓名进行模糊搜索" prefix-icon="el-icon-search" v-model="searchName" clearable>
      </el-input>

    </div>
    <div class="table">
      <el-table :data="showList" style="width: 100%" :header-cell-style="{ textAlign: 'center' }"
        :cell-style="{ textAlign: 'center' }">
        <el-table-column prop="name" label="操作人" width="260"> </el-table-column>


        <!-- 方法3： formatter -->
        <el-table-column prop="route" label="路径" width="380" :formatter="formatterRoute">

        </el-table-column>

        <el-table-column prop="status" label="操作名称"> </el-table-column>
        <el-table-column prop="date" label="操作日期"> </el-table-column>
      </el-table>

      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.filter((d) => d.name.includes(searchName)).length">
      </el-pagination>
    </div>

  </div>
</template>

<script>


import api from "../../api/index";



export default {
  name: 'SET',
  components: {},
  data() {
    return {
      currentPage: 1,
      pageSize: 5,
      tableData: [],
      searchName: "",

    };
  },
  computed: {
    showList() {

      return this.tableData.filter((d) => d.name.includes(this.searchName))
        .slice(
          // 切出一整页的 table
          (this.currentPage - 1) * this.pageSize,
          this.currentPage * this.pageSize
        );

    },
  },
  // watch: {
  //   searchName() {
  //     console.log("this.searchName", this.searchName);
  //   },
  // },
  methods: {

    handleSizeChange(val) {
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      console.log(`当前页: ${val}`);
    },
    formatterRoute(row, column, cellValue) {
      // console.log(row, column, cellValue, index);
      return cellValue === 0 ? "首页-发布商品" : "商品管理-编辑商品";
    },
  },
  created() {

    api.set.getSetData().then((res) => {
      this.tableData = res.data;

    });
  },
};
</script>

<style scoped lang='less'>
.header {
  position: relative;
  font-size: 28px;
  text-align: center;

  color: rgb(102, 102, 102);

  .line {
    display: block;
    width: 100%;
    height: 2px;
    background-color: silver;
    position: absolute;
    left: 0px;
    top: 50px;
  }
}

.select {
  position: relative;
  margin-top: 60px;
  width: 300px;

  &> :deep el-input {
    width: 200px;
  }
}

.table {
  margin-top: 20px;

  .el-pagination {
    margin-top: 60px;
    text-align: center;
  }
}
</style>